<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view>
		<view>
			<view class="" @click="uploadChange"
				style="width: 750rpx; height: 140px; display: flex; align-items: center; justify-content: center;">
				<image :src="list.userImage" mode="" style="border-radius: 50%; width: 220rpx; height: 220rpx;"></image>
			</view>

			<form @submit="formSubmit" @reset="formReset">



				<view class="uni-form-item uni-column">
					<view class="title" style="margin-right: 30rpx;">性别:</view>
					<radio-group name="sex" style="padding-right: 20rpx;">
						<label>
							<radio value="1" :checked="list.sex==1" /><text>男</text>
						</label>
						<label>
							<radio value="0" :checked="list.sex==0" /><text>女</text>
						</label>
					</radio-group>
				</view>

				<view class="uni-form-item uni-column">
					<view class="title">姓名：</view>
					<input class="uni-input" name="userName" placeholder="请输入姓名" :value="list.userName" />
				</view>

				<view class="uni-form-item uni-column">
					<view class="title">小青书号：</view>
					<input class="uni-input" name="bookiPhone" placeholder="请输入小青书号" :value="list.bookiPhone" />

				</view>

				<view class="uni-form-item uni-column">
					<view class="title">简介：</view>
					<input class="uni-input" name="introduction" placeholder="请输入简介" :value="list.introduction" />
				</view>

				<view class="uni-form-item uni-column">
					<view class="title">地区：</view>
					<input class="uni-input" name="signature" placeholder="请输入地区" :value="list.signature" />
				</view>
				<view class="uni-btn-v">
					<!-- <button type="default" form-type="reset"
						style="background-color:#c0c0c0; border-radius: 30px;">重置</button> -->
					<button form-type="submit" style="background-color: #07C145; border-radius: 30px;">保存</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//当前用户id
				userId: 0,
				//头像上传路径
				tempFilePaths: '',
				list: {

				}
			}
		},
		onLoad(options) {
			this.userId = options.userId
			this.user(options.userId)
		},
		methods: {
			//切换头像
			uploadChange() {
				let _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						_this.tempFilePaths = res.tempFilePaths[0];
						// 将选择的图片替换掉头像
						_this.$set(_this.list, 'userImage', res.tempFilePaths);
					},
				});
			},
			//加载用户数据
			async user(userId) {
				const _this = this;
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/list', {
					userId: userId
				})
				if (res.code !== 200) return uni.$ShowMsg("用户数据获取失败！");
				this.tempFilePaths = res.data.userImage
				this.list = res.data
			},
			formSubmit: function(e) {

				this.update(e);
			},
			async update(e) {
				const _this = this;
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/updateUser', {
					userId: _this.userId,
					userImage: _this.tempFilePaths,
					userName: e.detail.value.userName,
					bookiPhone: e.detail.value.bookiPhone,
					signature: e.detail.value.signature,
					introduction: e.detail.value.introduction,
					sex: e.detail.value.sex
				})
				if (res.code !== 200) return uni.$ShowMsg("保存失败！");
				if (res.data > 0) {
					this.user(this.userId);
					uni.$ShowMsg("保存成功");
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my?refresh=true' 
						}, 600)
					})
				}
			},
			formReset: function(e) {
				console.log('清空数据')
			}
		}
	}
</script>

<style lang="scss">
	.uni-form-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 0;
		padding-left: 20rpx;

		input {
			text-align: right;
			width: 75%;
			padding-right: 20rpx;
		}
	}

	.uni-btn-v {
		margin-top: 120rpx;
	}
</style>